<template>
  <div class="order-list">
    <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="订单类型">
                <el-select v-model="searchForm.state" placeholder="请选择状态" clearable>
                    <el-option label="待付款" value="0" />
                    <el-option label="待发货" value="1" />
                    <el-option label="已发货" value="2" />
                    <el-option label="已完成" value="3" />
                    <el-option label="已取消" value="4" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-input v-model="searchForm.orderNo" placeholder="" clearable/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="handleSearch">
                    搜索
                </el-button>
                <el-button @click="resetSearch">
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card class="table-card">
        <el-table
        v-loading="loading"
        :data="tableDate"
        border
        style="width:100%">
            <el-table-column type="index" label="ID" width="60" align="center"/>
            <el-table-column prop="orderNo" label="订单编号" width="210" align="center"/>
            <el-table-column prop="totalPrice" label="总价" width="120" align="center"/>
            <el-table-column prop="linkUser" label="联系人" width="120" align="center"/>
            <el-table-column prop="linkAddress" label="送货地址" min-width="200" show-overflow-tooltip />
            <el-table-column prop="state" label="订单状态" width="100">
                <template #defalut="{row}">
                    {{row.state}}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间" width="180" />
            <el-table-column label="操作" width="180" fixed="right">
                <template #default="{row}">
                    <el-button-group>
                        <el-button type="primary" link @click="handleDetail(row)">
                            <el-icon><Document/></el-icon>
                            详情
                        </el-button>
                        <el-button
                            v-if="row.state === 1"
                            type="success"
                            link
                            @click="handleShip(row)">
                            <el-icon><Van/></el-icon>
                            发货
                        </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

     <!-- 商品详情弹窗 -->
        <el-dialog
            v-model="ProductDetails"
            title="商品详情"
            width=800px>
            <el-table :data="orderInfo" border style="width=100%">
                <el-table-column label="图片" width="100">
                    <template #default="{row}">
                        <el-image
                            :src="row.img"
                            :preview-src-list="[row.img]"
                            fit="cover"
                            style="width:50px; height: 50px"
                            />
                    </template>
                </el-table-column>
                <el-table-column type="index" prop="goodId" label="商品id" width="60" align="center" />
                <el-table-column prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip />
                <el-table-column prop="price" label="单价" width="120">
                    <template #default="{ row }">
                        ¥{{ row.price.toFixed(2) }}
                    </template>
                    </el-table-column>
                <el-table-column prop="quantity" label="数量" width="100" align="center" />
                <el-table-column label="总价" width="120">
                    <template #default="{ row }">
                        ¥{{ (row.price * row.quantity).toFixed(2) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive,ref } from "vue";
// import { useRouter } from "vue-router";
import request from '@/utils/request'
// import router from "@/router";

// const router = useRouter()
const loading = ref(false)
const tableDate = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 商品详情
const orderInfo = ref({})
const ProductDetails = ref(false)

const searchForm = reactive({
    orderNo:'',
    username:'',
    state:'',
    dateRange:[]
})

// 获取订单列表
const getOrdersList = async () => {
    loading.value = true
    try {
        const params =  {
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            ...searchForm
        }
        if(searchForm.dateRange?.length === 2){
            params.startDate = searchForm.dateRange[0]
            params.endDate = searchForm.dateRange[1]
        }
        delete params.dateRange

        const res = await request({
            url:'/api/order//page',
            method:'get',
            params
        })
        console.log('订单',res.data);
        tableDate.value = res.data.records
        total.value = res.data.total
    } catch(error){
        console.error('获取订单列表失败:',error);
    }finally{
        loading.value = false
    }
}

// 获取商品详情
const getOrderDetail = async (id) => {
    try {
        const res = await request({
            url: `/api/order/orderNo/${id}`,
            method :'get'
        })
        orderInfo.value = res.data
    } catch (error) {
        console.error('获取详情失败：',error);
        
    }
}

//搜索
const handleSearch = () => {
    currentPage.value = 1
    getOrdersList()
}

// 重置搜索
const resetSearch = () => {
    Object.keys(searchForm).forEach(key => {
        searchForm[key] = key === 'dateRange' ? [] : ''
    })
    handleSearch()
}

// 查看详情
const handleDetail = (row) => {
    ProductDetails.value = true
    getOrderDetail(row.id)
    console.log(row);
    
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getOrdersList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getOrdersList()
}

onMounted(() => {
    getOrdersList()
})
</script>

<style scoped>
 .search-card {
    margin-bottom: 20px;
  }

  .search-form {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
</style>